<template>
  <div class="employer-info">
    <div class="employer-title">员工资料</div>
    <div class="button">
      <el-upload
        class="upload-demo"
        multiple
        :on-exceed="handleExceed"
        action="http://localhost:8000/api/employee_import/"
        :on-success="handleSuccess"
        :show-file-list="false"
      >
        <el-button type="primary">导入</el-button>
      </el-upload>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="employee_id" label="工号" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.employee_id }}</span>
          <el-input v-else v-model="scope.row.employee_id"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.name }}</span>
          <el-input v-else v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.age }}</span>
          <el-input v-else v-model="scope.row.age"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.gender }}</span>
          <el-select v-else v-model="scope.row.gender">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="部门" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.department }}</span>
          <el-select v-else v-model="scope.row.department">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="position" label="职务">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.position }}</span>
          <el-select v-else v-model="scope.row.position">
            <el-option
              v-for="item in duty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="Operations" label="操作" width="180">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="update(scope.$index)"
            v-if="!scope.row.editing"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            v-if="scope.row.editing"
            @click.prevent="confirm(scope.$index, scope.row)"
          >
            确认
          </el-button>
          <el-button
            link
            v-if="scope.row.editing"
            type="primary"
            size="small"
            @click.prevent="cancel(scope.$index, scope.row)"
          >
            取消
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="onAddItem">新增</el-button>
  </div>
</template>
<script setup>
import "./index.scss";
import importButton from "@/components/importButton.vue";
import { ref, onMounted, watch } from "vue";
import dayjs from "dayjs";
import { employeeSearch, employeeUpdate, employeeDelete } from "@/request/axios";
import { options, departments, duty } from "./index.config.ts";
import { ElMessage } from "element-plus";

const isUpdata = ref(false);
const tableData = ref([]);

const onAddItem = () => {
  let params = {
    employee_id: "",
    name: "",
    age: "",
    gender: "",
    department: "",
    position: "",
    editing: true,
  };
  const res1 = employeeUpdate(params);
  tableData.value.push(params);
};
// 编辑
const update = (index, data) => {
  tableData.value[index].editing = true;
};
// 取消
const cancel = (index, data) => {
  tableData.value[index].editing = false;
};
// 确定
const confirm = async (index, data) => {
  tableData.value[index].editing = false;
  const res = await employeeUpdate({
    ...data,
  });
  getEmploy();
};
// 删除
const deleteRow = async (index, data) => {
  tableData.value.splice(index, 1);
  // 参数 ： id和工号
  const deleteRes = await employeeDelete(data);
  if (deleteRes.data.success) {
    getEmploy();
    ElMessage({
      message: deleteRes.data.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: deleteRes.data.message,
      type: "warning",
    });
  }
};
const handleSuccess = (props) => {
  console.log(props, "props");
  if (props.success) {
    getEmploy();
    ElMessage({
      message: props.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: props.message,
      type: "error",
    });
  }
};
// 获取员工数据
const getEmploy = async () => {
  tableData.value = [];
  const res = await employeeSearch();
  if (res.data.length > 0) {
    res.data.forEach((val) => {
      tableData.value.push(val);
    });
  } else {
    tableData.value.push({
      employee_id: "",
      name: "",
      age: "",
      gender: "",
      department: "",
      position: "",
      editing: true,
    });
  }
};
onMounted(() => {
  getEmploy();
});
const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};
// const res1 = employeeUpdate();
</script>
